<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>红包记录</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="js/flexible.js"></script>
		<link rel="stylesheet" href="css/youxijilu.css" />
		<script src="js/jquery-3.1.1.js"></script>
		<script src="js/confi.js"></script>
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">红包记录</h1>
		</header>
		<div style="margin-top: 44px;">
			<ul id="gameMain" style="padding: 0.2rem 0.3rem;">
				<!--<li class="jilu">
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left"><span>【<span>新手区一</span>】<span>10</span>币<span>5</span>包</span>
						</span>
						<span class="mui-pull-right" style="color:#666666"><span style="margin-right: 0.1rem;">2010-12-10</span><span>10:00:00</span></span>
					</div>
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left" style="color: #68E57C;">
						<span>金币：
							<span>1.53</span>
						<span>(<span>运气最差</span>)</span>
						-<span>8.47</span>金币
						</span>
						</span>
					</div>
				</li>
				<li class="jilu">
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left"><span>【<span>新手区一</span>】<span>10</span>币<span>5</span>包</span>
						</span>
						<span class="mui-pull-right" style="color:#666666"><span style="margin-right: 0.1rem;">2010-12-10</span><span>10:00:00</span></span>
					</div>
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left">
						<span>金币：
							<span>1.53</span>
						<span>(<span>幸运</span>)</span>
						<span style="color: #ff3333;">+1.63金币</span>
						</span>
						</span>
					</div>
				</li>
				<li class="jilu">
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left"><span>【<span>新手区一</span>】<span>10-30</span>金币踩雷<span>1.5</span>倍</span>
						</span>
					</div>
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left">
						<span>金币：
							<span>0.00</span>
						<span>(<span>踩雷</span>)</span>
						<span style="color: #ff3333;">+15金币</span>
						</span>
						</span>
						<span class="mui-pull-right" style="color:#666666"><span style="margin-right: 0.1rem;">2010-12-10</span><span>10:00:00</span></span>
					</div>
				</li>
				<li class="jilu">
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left"><span>【<span>新手区一</span>】<span>10-30</span>金币踩雷<span>1.5</span>倍</span>
						</span>
					</div>
					<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">
						<span class="mui-pull-left" style="color: #68E57C;">
						<span>金币：
							<span>0.00</span>
						<span>(<span>埋雷</span>)</span>
						<span>-10金币</span>
						</span>
						</span>
						<span class="mui-pull-right" style="color:#666666"><span style="margin-right: 0.1rem;">2010-12-10</span><span>10:00:00</span></span>
					</div>
				</li>-->
			</ul>
		</div>
		<div class="mui-content-padded">
			<ul class="mui-pager">
				<li class="mui-previous">
					<a id="previousPage" href="#" style="background-color: #999999;color: #fff;">
						上一页
					</a>
				</li>
				<li class="mui-previous">
					<a href="#" id="yema">
						<span id="current">1</span>/<span id="sum"></span>
					</a>
				</li>
				<li class="mui-next">
					<a id="nextPage" href="#" style="background-color:#FF3333;color: #fff;">
						下一页
					</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			mui.init();
			var pageN = 6; //每页显示的条数
			income(1, pageN);
			//游戏记录
			var token = localStorage.getItem('token');

			function income(page, pageN) {
				$('#gameMain').empty();
				mui.ajax(config.host + '/home/User/gamelog', {
					headers: {
						'token': token
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型	
					data: {
						page: page,
						pageN: pageN
					},
					success: function(data) {
						if(data.code == 200) {
							if(data.data.length != 0) {
								var sum = Math.ceil(data.data.total / pageN);
								$('#sum').text(sum);
								data.data.data.map(function(items, index) {
									if(items.room_type == 1) {
										if(items.compensation>=0){
											$('#gameMain').append('<li class="jilu"><div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left"><span>' + items.room_name + '</span>】<span>' + items.gold_range + '</span>金币踩雷<span>' +
											items.odds + '</span>倍</span></span></div><div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left"><span>金币：<span>' +
											items.snatch_money + '</span><span>(<span>' + items.type + '</span>)</span><span style="color: #ff3333;">+' + items.compensation + '金币</span>' +
											'</span></span><span class="mui-pull-right" style="color:#666666"><span style="margin-right: 0.1rem;">' +
											items.create_time + '</span></div></li>');
										}else if(items.compensation<0){
											$('#gameMain').append('<li class="jilu"><div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left"><span>' + items.room_name + '</span>】<span>' + items.gold_range + '</span>金币踩雷<span>' +
											items.odds + '</span>倍</span></span></div><div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left" style="color: #68E57C;"><span>金币：<span>' +
											items.snatch_money + '</span><span>(<span>' + items.type + '</span>)</span><span>' + items.compensation + '金币</span>' +
											'</span></span><span class="mui-pull-right" style="color:#666666"><span style="margin-right: 0.1rem;">' +
											items.create_time + '</span></div></li>');
										}
									} else if(items.room_type == 2) {
										if(items.compensation>=0){
											$('#gameMain').append('<li class="jilu">' +
											'<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left"><span>【' + items.room_name + '】' + items.gold_range + '</span></span>' +
											'<span class="mui-pull-right" style="color:#666666"><span class="mui-pull-right" style="margin-right: 0.1rem;">' +
											items.create_time + '</span></div><div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left"><span>金币：<span>' + items.snatch_money + '</span><span>(<span>' +
											items.type + '</span>)</span><span style="color: #ff3333;">+' + items.compensation + '金币</span></span></span></div></li>');
										}else if(items.compensation<0){
											$('#gameMain').append('<li class="jilu">' +
											'<div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left"><span>【' + items.room_name + '】' + items.gold_range + '</span></span>' +
											'<span class="mui-pull-right" style="color:#666666"><span class="mui-pull-right" style="margin-right: 0.1rem;">' +
											items.create_time + '</span></div><div style="height: 0.8rem;padding-top: 0.3rem;font-size: 0.35rem;">' +
											'<span class="mui-pull-left" style="color: #68E57C;"><span>金币：<span>' + items.snatch_money + '</span><span>(<span>' +
											items.type + '</span>)</span><span>' + items.compensation + '</span>金币</span></span></div></li>');
										}
										
									}
								})

							} else {
								$('#gameMain').html('暂无数据');
								$('#gameMain').css({
									'height': '50px',
									'line-height': '50px',
									"text-align": 'center'
								});
							}

						} else {
							mui.toast(data.msg)
						}
					}
				});
			}
			//点击上一页
			$('#previousPage').on('tap', function() {
				var page = Number($("#current").text()) - 1;
				if(page >= 1) {
					income(page, pageN);
					$("#current").text(page);
				} else {
					mui.toast('当前是首页');
				}
			})
			//点击下一页
			$('#nextPage').on('tap', function() {
				var page = Number($("#current").text()) + 1;
				if(page <= $('#sum').text()) {
					income(page, pageN);
					$("#current").text(page);
				} else {
					mui.toast('当前是末页');
				}
			})
		</script>
	</body>

</html>